<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import SummaryIndex from './Components/SummaryIndex.vue'
import DetailsIndex from './Components/DetailsIndex.vue'
const activeName = ref('summary');

</script>
<template>
    <div class="page-contain">
        <el-tabs v-model="activeName" class="demo-tabs" >
            <el-tab-pane label="订单汇总" name="summary">
                <SummaryIndex v-if="activeName == 'summary'"></SummaryIndex>
            </el-tab-pane>
            <el-tab-pane label="订单明细" name="details">
                <DetailsIndex v-if="activeName == 'details'"></DetailsIndex>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style lang="less" scoped>
.page-contain{
    width: 100%;
    height: 100%;
    :deep(.el-tabs__header){
        margin-bottom:0;
    }
    :deep(.el-tabs__content){
        height:calc(100% - 40px);
    }
}
</style>